<template>
	<view class="registered" >
		<view class="h1">
			重置密码
			<view class="des">
				密码组成至少8位,且必须数字字母混合
			</view>
		</view>
		<u-form :model="formData" ref="uForm" :error-type="errorType">
			<u-form-item prop="password" label-position='top' :label-style="labelStyle">
				<u-input 
				:custom-style='inputStyle' 
				type='password' 
				placeholder-style="color: #cdcdf5;font-weight: 600;opacity: 0.2;" 
				placeholder="设置密码" 
				v-model="formData.password" />
			</u-form-item>
			<u-form-item prop="confirm" label-position='top' :label-style="labelStyle">
				<u-input 
				:custom-style='inputStyle' 
				type='password' 
				placeholder-style="color: #cdcdf5;font-weight: 600;opacity: 0.2;" 
				placeholder="确认密码" 
				v-model="formData.confirm" />
			</u-form-item>
		</u-form>
		<u-button 
		:loading="loading" 
		:class="{activeSubmit:formData.password && formData.confirm}" 
		:hair-line="btnBorder" 
		class="submit" 
		@click="submit">重置密码</u-button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				loading:false,
				btnBorder:false,//隐藏注册按钮边框
				inputStyle:{color:'#ffffff'},//输入框样式
				labelStyle:{color:"#ffffff"},//label样式
				errorType: ['message','border-bottom'],//错误提示
				codeText: '获取验证码',//获取验证码
				formData: {
					code:'',
					phone:'',
					password:'',//密码
					confirm:'',//确认密码
				},
				rules: {
					password: [{
						required: true,
						message: '请输入密码',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					},{
						min: 8,
						message: '密码组成至少八位',
						trigger: 'change'
					},{
						pattern: /^(?!([^A-Za-z]|\d)+$)[a-zA-Z\d]{6,}$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '密码必须为数字英文混合',
						trigger: 'change'
					},],
					confirm: [{
						required: true,
						message: '请再次输入密码',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					},{
						validator: (rule, value, callback) => {
							if(value != this.formData.password)return false
							if(value == this.formData.password)return true
						},
						message: '两次密码不一致',
						trigger: 'change'
					}]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(e) {
			this.formData.code = e.code
			this.formData.phone = e.phone
		},
		methods: {
			//提交
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.loading = true
						this.$http({
							url:this.$api.upPwd,
							method:'POST',
							hideLoading:false,
							data:{
								pwd:this.formData.password,
								repwd:this.formData.confirm,
								code:this.formData.code,
								phone:this.formData.phone
							},
							success:res=>{
								if(res.code == 200){
									uni.showToast({
									    title: res.msg,
									    duration: 2000,
										icon:'none'
									});
									setTimeout(()=>{
										uni.redirectTo({
										    url: "/pages/Login/index"
										});
									},1000)
								}
							},
							complete:e=>{
								this.price = null
								this.number_active = null
								this.loading = false
							}
							
						})
					} else {
						//console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.registered{
		padding: 0 50rpx;
		.h1{
			font-size: 24px;
			color: #cdcdf5;
			font-weight: 600;
			margin: 150rpx 0 80rpx 0;
			.des{
				font-size: 14px;
				color: rgba(205,205,245,0.2);
				margin-top: 5px;
			}
		}
		.mobile{
			display: flex;
		}
		.code{
			background-color:transparent;
			color: #5c67ff;
			border: 1px solid #5c67ff;
			font-weight: 600;
		}
		.submit{
			background-color: rgba(205,205,245,0.2);
			color: rgba(255,255,255,0.2);
			margin-top: 80rpx;
			border-color: #181818;
			font-size: 18px;
			font-weight: 600;
			height: 42px;
		}
		.activeSubmit{
			color: #FFFFFF;
			background-color: #5f6aff;
		}
		::v-deep .u-border-bottom:after{
			border-color: rgba(255,255,255,0.2);
		}
		::v-deep .u-form-item{
			padding: 30rpx 0 0rpx 0;
		}
		::v-deep .u-form-item__message{
			color: #FFFFFF;
			margin-bottom: 12rpx;
			margin-top: 0;
		}
		::v-deep .u-form-item--right__content{
			height: 70rpx;
		}
		::v-deep .uicon-eye-fill:before{
			content: '';
			background: url(../../static/icon/pwd.png)left center no-repeat;
			background-size: 100% 100%;
			width: 34rpx;
			height: 23rpx;
		}
		::v-deep .uicon-eye:before{
			content: '';
			background: url(../../static/icon/pwdb.png)left center no-repeat;
			background-size: 100% 100%;
			width: 34rpx;
			height: 23rpx;
		}
	}
</style>
